
<style type="text/css">
    .layui-form-label{
        padding-left: 9px;
        /*padding-right: 9px;*/
    }
    .layui-colla-content{
        padding: 5px;
    }
    .layui-badge{
        cursor:pointer;
    }
    .layui-badge-rim{
        padding: 0px;
    }
    .layui-badge{
        margin: 0px;
    }

    .layui-bg-gray:hover{
        background-color:red!important;color:#666!important
    }
</style>


<div class="layui-collapse" lay-accordion style="margin: 3px">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">基础配置</h2>
        <div class="layui-colla-content   layui-show">
            <form class="layui-form"   action="javascript:;" lay-filter="xdWidget-attr-form">
                <input type="hidden"  name="id" id="id" value="">
                <input type="hidden"  name="classFlag" value="">
                <input type="hidden"  name="label" id="label" value="">
                <input type="hidden"  name="dataId" id="dataId" value="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">Panel标题</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <input type="checkbox" name="nameFlag" lay-filter="nameFlag" title="展示标题" lay-skin="primary"  value="true" checked>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">数据源</label>
                        <div class="layui-input-inline">
                            <select name="dataSourceId" lay-filter="dataSourceId" id="dataSourceId" lay-verify="" lay-search>

                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item xdWidget-attr-row2">
                    <div class="layui-inline " >
                        <label class="layui-form-label">数据集</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="dataType"  lay-filter="dataType" value="SQL" title="SQL">
                            <input type="radio" name="dataType"  lay-filter="dataType"  value="Panel" title="Panel">
                        </div>
                    </div>
                </div>

                <hr>
                <div class="layui-form-item">
                    <div  align="center">
                        <button class="layui-btn  layui-btn-sm"  onclick="viewParam()" >参数绑定</button>
                        <button class="layui-btn  layui-btn-sm" lay-submit="" lay-filter="xdWidget-panel-sql-view-bt">SQL参数化预览</button>
                        <button class="layui-btn  layui-btn-sm" lay-submit="" lay-filter="xdWidget-panel-form-view-bt">数据预览</button>
                        <button class="layui-btn  layui-btn-sm" lay-submit="" lay-filter="xdWidget-panel-form-bt">保存</button>
                    </div>
                </div>
            </form>

            <li class="layui-timeline-item">
                <div class="layui-timeline-content layui-text">
                    <h4 class="layui-timeline-title">关于填报报表说明</h4>
                    <ul>
                        <li>填报报表目前只支持单表操作，即SQL形式：select * from tableName</li>
                    </ul>
                </div>
            </li>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">Table属性</h2>
        <div class="layui-colla-content" id="xdWidget-panel-tb-colla">
            <form class="layui-form"   action="javascript:;" lay-filter="xdWidget-panel-tb-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">头部工具</label>
                        <div class="layui-input-inline">
                            <select  name="toolbar" xm-select-radio="">
                                <option value="false">无</option>
                                <option value="<div><div class='layui-btn-group'><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='downLoad'><i class='layui-icon'>&#xe601;</i></button></div></div>">下载|打印|筛选</option>
                                <option value="<div><div class='layui-btn-group'><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='add'><i class='layui-icon'>&#xe654;</i></button><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='edit'><i class='layui-icon'>&#xe642;</i></button><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='del'><i class='layui-icon'>&#xe640;</i></button><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='upLoad' ><i class='layui-icon'>&#xe681;</i></button><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='downLoad'><i class='layui-icon'>&#xe601;</i></button><button class='layui-btn layui-btn-primary layui-btn-sm' lay-event='downLoadTmp'>模板</button></div></div>">增|删|改|上传|下载</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">宽度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="width" lay-filter="width" placeholder="不填自适应,填写只能数字"  autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">高度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="height" value="full-100" lay-filter="height" placeholder="最大化:full-100" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">Cell最小宽度</label>
                        <div class="layui-input-inline">
                            <input type="text" value="60" name="cellMinWidth" placeholder="默认60" lay-filter="cellMinWidth" lay-verify="number" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">Skin</label>
                        <div class="layui-input-inline">
                            <select  name="skin" xm-select-radio="">
                                <option value="" selected>默认</option>
                                <option value="line">行边框风格</option>
                                <option value="row">列边框风格</option>
                                <option value="nob">无边框风格</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">尺寸</label>
                        <div class="layui-input-inline">
                            <select  name="size_" >
                                <option value="" selected>默认</option>
                                <option value="sm">小尺寸</option>
                                <option value="lg">大尺寸</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">隔行背景</label>
                        <div class="layui-input-inline">
                            <select  name="even" >
                                <option value="" selected>默认</option>
                                <option value="false">否</option>
                                <option value="true">是</option>
                            </select>
                         </div>
                    </div>


                    <div class="layui-inline">
                        <label class="layui-form-label">分页</label>
                        <div class="layui-input-inline">
                            <select  name="page" >
                                <option value="true" selected>是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">初始查询</label>
                        <div class="layui-input-inline">
                            <select  name="queryFlag" >
                                <option value="true" selected>是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">开启合计</label>
                        <div class="layui-input-inline">
                            <select  name="totalRow" >
                                <option value="false" selected>否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" id="xdWidget-table-autoFlag">
                        <label class="layui-form-label">自动刷新</label>
                        <div class="layui-input-inline">
                            <select  name="autoFlag" lay-filter="autoFlag" >
                                <option value="false" selected>否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>

                </div>
                <hr>
                <div class="layui-form-item">
                    <div align="center">
                        <button class="layui-btn  layui-btn-sm" lay-submit="" lay-filter="xdWidget-panel-tb-form-bt">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-colla-item ">
        <h2 class="layui-colla-title">Field属性</h2>
        <div class="layui-colla-content">
            <fieldset class="layui-elem-field">
                <legend style="font-size: 13px">
                    <form class="layui-form"   action="javascript:;" lay-filter="">
                        <button class="layui-btn layui-btn-xs" lay-submit lay-filter="xdWidget-panel-sqlField" id="xdWidget-panel-sqlField" >获取字段</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-submit lay-filter="xdWidget-panel-addHead-bt" id="xdWidget-panel-addHead-bt"  >＋表头</button>
                    </form>
                </legend>
                <div class="layui-field-box panel-sql-field" title="点击字段名可复制到剪切板">

                </div>
            </fieldset>
            <div id="xdWidget-panel-addHead-div">

            </div>
        </div>
    </div>

    <div class="layui-colla-item ">
        <h2 class="layui-colla-title">绑定参数</h2>
        <div class="layui-colla-content">
            <fieldset class="layui-elem-field" style="border-bottom: hidden;border-left: hidden;border-right: hidden">
                <legend style="font-size: 13px">绑定的Form元素为SQL中可能用到的参数 </legend>
            </fieldset>
            <div id="xdWidget-panel-param-div">

            </div>
        </div>
    </div>

</div>

<hr>
<form class="layui-form"   action="javascript:;" lay-filter="xdWidget-previewPanelTable-form">
    <div class="layui-form-item">
        <div align="center">
            <button class="layui-btn" lay-submit="" lay-filter="xdWidget-previewPanelTable-form-bt">效果预览</button>
        </div>
    </div>
</form>

<script type="text/html" id="xdWidget-attr-form-sql">
    <div class="layui-inline  dataSql" >
        <div class="layui-inline" >
            <div class="layui-input-inline" onclick="editTextarea('dataSql')" >
                <textarea name="dataSql" id="dataSql" style="min-height:36px;height:36px;" placeholder="Example:select a,b from table" readonly lay-verify="required" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="xdWidget-attr-form-panel">
    <div class="layui-inline dataPanelId" >
        <div class="layui-inline" >
            <div class="layui-input-inline" >
                <select id="dataPanelId" name="dataPanelId" xm-select="dataPanelId"
                        xm-select-height="35px" xm-select-search="" lay-verify="required"
                        xm-select-radio=""
                        >
                </select>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="xdWidget-panel-addHead-dom">
    <fieldset class="layui-elem-field panel-addHead-dom">
        <legend style="font-size: 13px">{{d.grade}}级表头 <button class="layui-btn layui-btn-normal layui-btn-xs" lay-submit lay-filter="panel-addField-bt" head-grade="{{d.grade}}">＋列</button></legend>
        <div class="layui-field-box" id="head-grade-{{d.grade}}" ondragover="allowDrop(event)" ondrop="drop(event)" grade="{{d.grade}}">

        </div>
    </fieldset>
</script>

<script  type="text/html" id="xdWidget-panel-col-dom">
    {{# var fn = function(a){ return Number(a)} }}
<span class="layui-badge-rim" id="{{d.id}}" grade="{{d.grade}}" index="{{d.colIndex}}"><span class="layui-badge layui-bg-gray" lay-submit lay-filter="panel-updateField" reduce="-1" ><</span><span class="layui-badge layui-bg-gray" lay-submit lay-filter="panel-updateField" reduce="1" >></span><span class="layui-badge layui-bg-cyan" lay-submit lay-filter="panel-tb-field-edit">{{commonUtil.nvl(d.title,d.field)}}({{d.rowspan}},{{commonUtil.parseNumber(d.colspan)}} )</span><span class="layui-badge layui-bg-gray" lay-submit lay-filter="panel-updateField" reduce="0" >×</span></span>
</script>

<script  type="text/html" id="xdWidget-table-autoInterval-dom">
    <div class="layui-inline" id="xdWidget-table-autoInterval">
        <label class="layui-form-label">刷新间隔</label>
        <div class="layui-input-inline">
            <input type="text" name="autoInterval" placeholder="单位：分钟"  lay-verify="number" autocomplete="off" class="layui-input">
        </div>
    </div>
</script>


